<template>
  <el-form-item :label="`${title}机供品配置`" :prop="`${prefix}DetailList`">
    <div>
      <div v-for="(item, index) in model[`${prefix}DetailList`]" :key="item.id" class="flex mb-5px">
        <el-select placeholder="请选择机供品" filterable class="!w-240px" v-model="item.supplyId">
          <el-option
            v-for="simple in SimpleList"
            :key="simple.id"
            :label="simple.name"
            :value="String(simple.id)"
          />
        </el-select>
        <el-input class="!w-160px" v-model.number="item.supplyQty">
          <template #append>{{ unit(item.supplyId) }}</template>
        </el-input>
        <el-button
          type="danger"
          style="margin-left: 20px"
          @click="delHandler(model[`${prefix}DetailList`], index)"
          v-if="index != 0"
          ><Icon icon="ep:delete" class="mr-5px" />删除</el-button
        >
      </div>
      <el-button @click="addHandler(model[`${prefix}DetailList`])"
        ><Icon icon="ep:plus" class="mr-5px" />添加一行{{ title }}机供品数据</el-button
      >
    </div>
  </el-form-item>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true // 模块标题
  },
  prefix: {
    type: String,
    required: true // 字段前缀
  },
  model: {
    type: Object,
    required: true // 表单数据（绑定父组件的formData）
  },
  // eslint-disable-next-line vue/prop-name-casing
  SimpleList: {
    type: Array,
    required: true
  }
})

/** 计算规格 */
const unit = computed(() => {
  return (id: string | number) => {
    const item = props.SimpleList.find((item) => item.id == id)
    return item ? item.standardName : ''
  }
})

/** 添加一行 */
const addHandler = (item: any) => {
  item.push({
    id: undefined,
    supplyId: undefined,
    supplyQty: undefined
  })
}

/** 删除一行 */
const delHandler = (item: any, index: any) => {
  item.splice(index, 1)
}
</script> 

<style scoped >
.meal-config-block {
  margin-bottom: 24px;
}
.block-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.row-group {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
</style>